import { PropsWithChildren } from "react";
import { SvgIcon } from "../../components/SvgIcon";
import { useControllableValue } from "ahooks";
import { StandardProps } from "ahooks/lib/useControllableValue";
import { Button, Input } from "antd";

interface ILegalAdviceInputProps {
  className?: string;
  disabled?: boolean;
  suffixChildren?: any;
  onSubmit?: (str?: string) => void;
}
export function LegalAdviceInput(
  props: PropsWithChildren<
    ILegalAdviceInputProps & Partial<StandardProps<string>>
  >
) {
  const { onSubmit, disabled, suffixChildren } = props;
  const [value, setValue] = useControllableValue(props);
  return (
    <div className="inputWrap flex-1">
      <div className="TalkBoxWrapper">
        <div className="TalkBox">
          <div className="TalkBox__Content">
            <div
              className="TalkBox__TextArea"
              style={{
                width: "calc(100% - 30px)",
              }}
            >
              <Input.TextArea
                placeholder="请输入您的问题或指令，支持Shift+Enter换行"
                disabled={disabled}
                maxLength={8001}
                style={{
                  marginTop: 0,
                  overflowY: "hidden",
                  resize: "none",
                  height: 30,
                  maxHeight: 96,
                }}
                autoSize={{ minRows: 1, maxRows: 6 }}
                variant="borderless"
                value={value}
                onChange={(e) => setValue(e.target.value)}
                onKeyDown={(e) => {
                  if (!e.shiftKey && e?.code === "Enter" && value?.trim()) {
                    e.preventDefault();
                    onSubmit?.(value?.trim());
                    setValue("");
                    return;
                  }
                }}
              />
            </div>
          </div>
          <div className="flex flex-row absolute right-[16px] bottom-[12px] items-center gap-[8px]">
            {suffixChildren}
            <Button
              onClick={() => {
                onSubmit?.(value);
                setValue("");
              }}
              shape="circle"
              type="primary"
              size="large"
            >
              <SvgIcon name="icon-fasong_default" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
